<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>canvas</title>
		<script type="text/javascript">
			window.onload = function() {
				var oc = document.getElementById('one');
				var cxt = oc.getContext('2d');
				var img = new Image();
				img.src = 'http://www.hoyoubo.com/images/hoyoubo_07.png';
				img.onload = function() {
					draw(this);
					drawTag(100, 300, 0, '来吧');
					drawTag(300, 100, 1, '不来');
				};

				function draw(obj) {
					cxt.drawImage(obj, 0, 0, 500, 500);
				}

				function drawTag(x, y, m, tet) {
					//文本框
					cxt.beginPath();
					cxt.fillStyle = "rgba(255, 255, 255, .7)";
					cxt.strokeStyle = "rgba(255, 255, 255, .1)";
					cxt.font = "14px 黑体";
					var w = cxt.measureText(tet + ' ').width;
					if (0 == m) {
						cxt.fillRect(x + 10, y - 10, w, 20);
						cxt.moveTo(x + 5, y);
						cxt.lineTo(x + 10, y - 10);
						cxt.lineTo(x + 10, y + 10);
						cxt.lineTo(x + 5, y);
					}
					if (1 == m) {
						cxt.fillRect(x - 10 - w, y - 10, w, 20);
						cxt.moveTo(x - 5, y);
						cxt.lineTo(x - 10, y - 10);
						cxt.lineTo(x - 10, y + 10);
						cxt.moveTo(x - 5, y);
					}
					cxt.closePath();
					cxt.stroke();
					cxt.fill();
					//坐标
					cxt.fillStyle = "#FF0000";
					cxt.beginPath();
					cxt.arc(x, y, 5, 0, 360, false);
					cxt.closePath();
					cxt.fill();
					//文本
					cxt.fillStyle = "#000000";
					cxt.textAlign = "center";
					cxt.textBaseline = "middle";
					if (0 == m) {
						cxt.fillText(tet, x + 10 + w / 2, y);
					}
					if (1 == m) {
						cxt.fillText(tet, x - 10 - w / 2, y);
					}
				}
			};
		</script>
	</head>

	<body>
		<canvas id="one" width="500" height="500"></canvas>
	</body>

</html>